.bin-popper {
  --b-popper-padding: var(--bin-popper-padding);
  --b-popper-tooltip-padding: var(--bin-popper-tooltip-padding);
  --b-popper-radius: var(--bin-popper-radius);
  --b-popper-item-height: var(--bin-popper-item-height);
  --b-popper-item-margin: var(--bin-popper-item-margin);
  --b-popper-bg-light: var(--bin-popper-bg-light);
  --b-popper-bg-dark: var(--bin-popper-bg-dark);
}

.bin-popper {
  position: absolute;
  border-radius: var(--bin-border-radius-default);
  padding: var(--b-popper-tooltip-padding);
  z-index: 2000;
  font-size: var(--bin-font-size-default);
  line-height: var(--bin-base-line-height);
  min-width: 10px;
  word-wrap: break-word;
  visibility: visible;

  &.is-dark {
    color: var(--b-popper-bg-light);
    background: var(--b-popper-bg-dark);

    .bin-popper__arrow::before {
      background: var(--b-popper-bg-dark);
      right: 0;
    }
  }

  &.is-light {
    background: var(--b-popper-bg-light);
    box-shadow: var(--bin-shadow-popper);

    .bin-popper__arrow::before {
      box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
      background: var(--b-popper-bg-light);
      right: 0;
    }
  }

  &.is-pure {
    padding: 0;
  }
}

.bin-popper__arrow {
  position: absolute;
  width: 8px;
  height: 8px;
  z-index: -1;

  &::before {
    position: absolute;
    width: 8px;
    height: 8px;
    z-index: -1;
    content: ' ';
    transform: rotate(45deg);
    background: var(--b-popper-bg-dark);
    box-sizing: border-box;
  }
}

.bin-popper[data-popper-placement^='top'] > .bin-popper__arrow {
  bottom: -4px;
}

.bin-popper[data-popper-placement^='bottom'] > .bin-popper__arrow {
  top: -4px;
}

.bin-popper[data-popper-placement^='left'] > .bin-popper__arrow {
  right: -4px;
}

.bin-popper[data-popper-placement^='right'] > .bin-popper__arrow {
  left: -4px;
}

.bin-popper.is-light[data-popper-placement^='top'] .bin-popper__arrow::before {
  box-shadow: 3px 3px 7px rgba(0, 0, 0, 0.07);
  border-top-color: transparent;
  border-left-color: transparent;
}

.bin-popper.is-light[data-popper-placement^='bottom'] .bin-popper__arrow::before {
  box-shadow: -3px -3px 7px rgba(0, 0, 0, 0.07);
  border-bottom-color: transparent;
  border-right-color: transparent;
}

.bin-popper.is-light[data-popper-placement^='left'] .bin-popper__arrow::before {
  box-shadow: 3px -3px 7px rgba(0, 0, 0, 0.07);
  border-left-color: transparent;
  border-bottom-color: transparent;
}

.bin-popper.is-light[data-popper-placement^='right'] .bin-popper__arrow::before {
  box-shadow: -3px 3px 7px rgba(0, 0, 0, 0.07);
  border-right-color: transparent;
  border-top-color: transparent;
}
